import { useState, useEffect, useCallback, useMemo, useRef } from 'react'
import { useOutletContext, useNavigate } from 'react-router-dom'
import { useTranslation } from 'react-i18next'
import useIsMobile from '@/hooks/isMoboile'  //引入hooks中的判断移动设备的函数
import ChatHeader from './Components/ChatMessage/ChatHeader' // 引入移动端的header组件
import AvatarModal from './Components/ChatMessage/AvatarModal' // 引入AI头像弹窗组件
import FullScreenLoading from './Components/ChatMessage/FullScreenLoading' // 引入全屏Loading组件
import ChatWindow from './Components/ChatMessage/ChatWindow' // 引入聊天窗口组件
import ChatContentHeader from './Components/ChatContentHeader/ChatContentHeader' // 引入聊天内容头部组件
import { useAiPersonData } from '../../hooks/useAiPersonData' // 引入AI角色数据管理hook
import ChatAlbum from './Components/ChatAiBum/ChatAlbum' // 引入AI角色数据管理组件
import ChatHistoryList from './Components/ChatHistory/ChatHistoryList' // 引入聊天历史列表组件
import ChatActionsModal from './Components/ActionModal.tsx/ChatActionsModal' // 引入聊天操作弹窗组件
import { useChatHistoryManager } from '../../hooks/useChatHistoryManager' // 引入聊天历史管理hook
import ImageViewer from '../../components/ImageViewer' // 引入图片预览组件
import MbtiPopup from '@/components/MBTI/MbtiPopup';

// 导入vconsole用于移动端调试
let VConsole: any = null;
if (typeof window !== 'undefined') {
  import('vconsole').then(module => {
    VConsole = module.default;
  });
}

// 扩展Window接口以支持vConsole
declare global {
  interface Window {
    vConsole?: any;
  }
}

// Outlet context类型定义
interface OutletContext {
  activeTab: string;
  setActiveTab: (tab: string) => void;
}

export default function Chat() {
  const { t } = useTranslation()
  const isMobile = useIsMobile() // 判断是否为移动设备
  const navigate = useNavigate() // 页面跳转
  const { activeTab, setActiveTab } = useOutletContext<OutletContext>()   // 获取Outlet上下文中的activeTab和setActiveTab
  const { aiPersonData, loading } = useAiPersonData()// 获取AI角色数据

  // 组件状态
  const [showAvatarModal, setShowAvatarModal] = useState(false) // AI头像弹窗显示状态
  // const [showHistoryOnMobile, setShowHistoryOnMobile] = useState(false) // 移动端历史记录显示状态
  const [albumCollapsed, setAlbumCollapsed] = useState(false) // 相册收起状态
  const [generateVoice, setGenerateVoice] = useState(false) // 语音生成开关
  const [showActionsModal, setShowActionsModal] = useState(false) // 操作弹窗显示状态
  const [chatWindowReady, setChatWindowReady] = useState(false); // 新增状态
  // const chatWindowRef = useRef<any>(null); // 可用于后续扩展（当前未用到，注释掉）
  
  // 图片预览相关状态
  const [showImageViewer, setShowImageViewer] = useState(false);
  const [previewImageUrl, setPreviewImageUrl] = useState<string>('');
  const [showMbtiPopup, setShowMbtiPopup] = useState(false);

  // 聊天历史管理
  const {
    historyList,
    currentChatId,
    loading: historyLoading,
    error: historyError,
    selectChat: originalSelectChat, // 重命名原始selectChat
    resetChat,
    deleteChat,
    updateLastMessage,
    updateMessageStatus, // 新增：更新消息状态
    ensureCurrentChatInHistory,
    refreshHistoryList, // 新增：刷新历史列表函数
    wsConnected // 使用WebSocket连接状态
  } = useChatHistoryManager();
  
  // 打印WebSocket连接状态
  // useEffect(() => {
  //   // console.log('🔌 WebSocket连接状态:', wsConnected ? '已连接' : '未连接');
  // }, [wsConnected]);
  
  // 监听聊天历史列表变化，特别关注未读消息状态
  useEffect(() => {
    if (historyList.length > 0) {
      // 检查是否有未读消息
      const unreadChats = historyList.filter(item => item.lastMessageStatus === 1);
      // if (unreadChats.length > 0) {
      //   // console.log('🔴 Chat页面检测到未读消息:', unreadChats.length, '条');
      // }
    }
  }, [historyList]);

  // 优化包装selectChat函数，只在必要时重置chatWindowReady状态
  const selectChat = useCallback((chatId: string, replace?: boolean) => {
    // 只在切换到不同聊天时重置chatWindowReady状态
    if (chatId !== currentChatId) {
      // console.log('切换到新聊天，重置chatWindowReady状态:', { chatId, currentChatId });
      setChatWindowReady(false);
    } else {
      // console.log('重新选择当前聊天，保持chatWindowReady状态:', chatId);
    }
    // 调用原始selectChat函数
    originalSelectChat(chatId, replace);
  }, [originalSelectChat, currentChatId]);

  // 初始化vconsole（仅在移动端和开发环境）
  useEffect(() => {
    if (isMobile && (import.meta.env.DEV || import.meta.env.VITE_ENABLE_VCONSOLE === 'true')) {
      const initVConsole = async () => {
        try {
          if (!VConsole) {
            const module = await import('vconsole');
            VConsole = module.default;
          }

          // 检查是否已经初始化过
          if (!window.vConsole) {
            const vConsole = new VConsole({
              theme: 'dark',
              defaultPlugins: ['system', 'network', 'element', 'storage'],
              disableLogScrolling: false
            });
            window.vConsole = vConsole;
            // console.log('🔧 VConsole 已启动 - 移动端调试工具');
          }
        } catch (error) {
          // console.error('VConsole 初始化失败:', error);
          console.error('VConsole initialization failed',error);
        }
      };

      initVConsole();

      // 清理函数
      return () => {
        if (window.vConsole) {
          window.vConsole.destroy();
          window.vConsole = null;
          // console.log('🔧 VConsole 已销毁');
        }
      };
    }
  }, [isMobile]);

  // 确保当前聊天在历史列表中
  useEffect(() => {
    if (aiPersonData) {
      ensureCurrentChatInHistory(aiPersonData);
    }
  }, [aiPersonData, ensureCurrentChatInHistory]);

  // 优化超时保护，缩短超时时间加快加载
  useEffect(() => {
    // 如果已经准备好，不需要超时保护
    if (chatWindowReady) return;
    
    // 第一级超时：3秒，适用于大多数情况
    const firstTimeoutId = setTimeout(() => {
      if (!chatWindowReady) {
        // console.log('聊天窗口准备超时(3秒)，强制设置为准备好状态', { currentChatId });
        setChatWindowReady(true);
      }
    }, 3000);
    
    // 第二级超时：作为备份，确保不会完全卡住
    const secondTimeoutId = setTimeout(() => {
      if (!chatWindowReady) {
        // console.log('聊天窗口准备最终超时(5秒)，强制设置为准备好状态', { currentChatId });
        setChatWindowReady(true);
      }
    }, 5000);
    
    return () => {
      clearTimeout(firstTimeoutId);
      clearTimeout(secondTimeoutId);
    };
  }, [chatWindowReady, currentChatId]);

  // 添加日志记录，跟踪状态变化
  // useEffect(() => {
  //   console.log('Chat状态变化:', { 
  //     chatWindowReady, 
  //     loading, 
  //     historyLoading, 
  //     currentChatId,
  //     showLoading: (loading || historyLoading || !chatWindowReady) && !!currentChatId
  //   });
  // }, [chatWindowReady, loading, historyLoading, currentChatId]);


  // AI头像点击处理函数 - 使用useCallback优化
  const handleAvatarClick = useCallback(() => {
    setShowAvatarModal(true)
  }, []);

  // 更多按钮点击处理函数 - 在移动端显示操作弹窗 - 使用useCallback优化
  const handleMoreClick = useCallback(() => {
    if (isMobile) {
      setShowActionsModal(true);
    } else {
      // console.log('显示更多功能菜单')
    }
  }, [isMobile]);

  // 切换相册显示状态 - 使用useCallback优化
  const handleToggleAlbum = useCallback(() => {
    setAlbumCollapsed(prev => !prev);
  }, []);

  // 显示操作菜单 - 使用useCallback优化
  const handleShowActions = useCallback(() => {
    // console.log('显示操作菜单');
  }, []);

  // 语音发送消息 - 使用useCallback优化
  const handleVoiceSendMessage = useCallback(() => {
    // console.log('语音发送消息');
  }, []);

  // 处理图片点击预览
  const handleImagePreview = useCallback((imageUrl: string) => {
    setPreviewImageUrl(imageUrl);
    setShowImageViewer(true);
  }, []);

  // 关闭图片预览
  const handleCloseImageViewer = useCallback(() => {
    setShowImageViewer(false);
  }, []);

  // AI头像组件 - 使用useMemo优化
  const aiAvatarComponent = useMemo(() => {
    return aiPersonData?.avatar ? (
      <img
        src={aiPersonData.avatar}
        alt="AI Avatar"
        className="w-12 h-12 rounded-full object-cover object-top border-2 border-pink-500"
      />
    ) : (
      <div className="w-12 h-12 rounded-full bg-gray-600 flex items-center justify-center border-2 border-pink-500">
        <i className="fas fa-robot text-gray-400 text-lg"></i>
      </div>
    );
  }, [aiPersonData?.avatar]);

  return (
    <div className="w-full relative">
      {/* 全屏Loading - 在数据加载时显示 */}
      <FullScreenLoading show={(loading || historyLoading || !chatWindowReady) && !!currentChatId} />

      <div className={isMobile ? "fixed inset-0 flex flex-col bg-[rgb(19,19,19)]" : ""}>
        {/* 移动端显示自定义Header */}
        {isMobile && (
          <ChatHeader
            aiPersonData={aiPersonData ? {
              avatar: aiPersonData.avatar,
              username: aiPersonData.username
            } : null}
            onAvatarClick={handleAvatarClick}
            onMoreClick={handleMoreClick}
            activeTab={activeTab}
            setActiveTab={setActiveTab}
            generateVoice={generateVoice}
            setGenerateVoice={setGenerateVoice}
          />
        )}

        {/* Chat页面主内容区域 */}
        <div
          className={isMobile ? "flex-1 overflow-hidden" : "flex h-[calc(100vh-4rem)]"}
        >
          {/* 聊天历史列表 - 仅在PC端显示 */}
          {!isMobile && (
            <div className="w-1/4 min-w-0 max-w-xs flex-shrink-0 border-r border-[rgb(54,54,54)]">
              <ChatHistoryList
                historyList={historyList}
                currentId={currentChatId}
                onSelect={selectChat}
                onReset={resetChat}
                onDelete={deleteChat}
                onUpdateStatus={updateMessageStatus} // 新增：传递更新消息状态的函数
                onRefreshData={() => refreshHistoryList(true)} // 新增：传递刷新数据函数
                loading={historyLoading}
                error={historyError}
              />
            </div>
          )}

          {/* 中间聊天窗口区域 */}
          <div className={isMobile ? "h-full" : "flex-1 min-w-0 flex"}>
            {/* 聊天窗口区域，包含ChatContentHeader和ChatWindow */}
            <div className={isMobile ? "h-full" : "flex-1 border-r border-r-[rgb(54,54,54)] flex flex-col"}>
              {/* ChatContentHeader - 仅在PC端显示 */}
              {!isMobile && aiPersonData && (
                <ChatContentHeader
                  aiAvatarComponent={aiAvatarComponent}
                  aiData={{ name: aiPersonData.username || 'AI Companion' }}
                  onShowActions={handleShowActions}
                  albumCollapsed={albumCollapsed}
                  onToggleAlbum={handleToggleAlbum}
                  generateVoice={generateVoice}
                  setGenerateVoice={setGenerateVoice}
                  loading={loading}
                  handleVoiceSendMessage={handleVoiceSendMessage}
                  t={t}
                  status={aiPersonData.status} // 新增：在线状态
                />
              )}

              {/* ChatWindow组件的外层盒子 */}
              <div
                className={isMobile ? "h-full" : "flex-1 min-h-0"}
               
              >
                {/* 传递 handleMbtiClick 给 MessageInput */}
                <ChatWindow 
                  aiAvatar={aiPersonData?.avatar}
                  userAvatar={undefined} // 将由ChatWindow内部从useAuth获取
                  activeTab={activeTab}
                  setActiveTab={setActiveTab}
                  onLastMessageUpdate={(lastMessage, chatId) => {
                    // 🔧 修复：使用ChatWindow传递的chatId，避免聊天切换时的ID混乱
                    const targetChatId = chatId || currentChatId;
                    updateLastMessage(targetChatId, lastMessage);
                  }}
                  isVoiceMode={generateVoice}
                  onReady={() => setChatWindowReady(true)} // 新增：渲染并滚动到底部后调用
                  onImagePreview={handleImagePreview} // 新增：处理图片预览
                  // onMbtiClick={() => setShowMbtiPopup(true)}
                />
              </div>
            </div>

            {/* AI相册组件 - 仅在PC端显示，可通过ChatContentHeader控制显示/隐藏 */}
            {!isMobile && !albumCollapsed && (
              <div className="w-1/3 min-w-0 max-w-sm flex-shrink-0 border-l border-[rgb(54,54,54)] overflow-hidden">
                <ChatAlbum
                  aiPersonData={aiPersonData || {} as any}
                  loading={loading}
                />
              </div>
            )}
          </div>
        </div>
      </div>

      {/* AI头像弹窗 - 只在移动端显示 */}
      {isMobile && (
        <AvatarModal
          show={showAvatarModal}
          onClose={() => setShowAvatarModal(false)}
          activeTab={activeTab}
          setActiveTab={setActiveTab}
          aiPersonData={aiPersonData}
          loading={loading}
          historyList={historyList}
          currentChatId={currentChatId}
          onSelectChat={(id, replace) => selectChat(id, replace)}
          onResetChat={resetChat}
          onDeleteChat={deleteChat}
          historyLoading={historyLoading}
          historyError={historyError}
          onRefreshData={() => refreshHistoryList(true)}
        />
      )}

      {/* 聊天操作弹窗 - 只在移动端显示 */}
      {isMobile && (
        <ChatActionsModal
          showActions={showActionsModal}
          setShowActions={setShowActionsModal} 
          setShowConfirmDialog={() => { }}
          isPCView={false}
          id={currentChatId}
          t={t}
          loading={loading}
          navigate={navigate}
          onResetChat={resetChat}
        />
      )}

      {/* 图片预览组件 */}
      <ImageViewer
        show={showImageViewer}
        mediaUrl={previewImageUrl}
        mediaType="image"
        mediaAlt={t('chat.aiGenerated')}
        onClose={handleCloseImageViewer}
      />
      {/* MBTI 测试弹窗 */}
      <MbtiPopup show={showMbtiPopup} onClose={() => setShowMbtiPopup(false)} />
    </div>
  )
}  